<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="8">
            <a-form-item label="学院">
              <a-select
                showSearch
                :allowClear="true"
                placeholder="请选择"
                @change="changeCollege"
                v-model="queryParam.institute"
                :options="collegeList"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="导员名称">
              <a-select
                showSearch
                :allowClear="true"
                placeholder="请选择"
                @change="changeAssistant"
                v-model="queryParam.assistantId"
                :options="assistantList"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="学生姓名">
              <a-input placeholder="请输入学生姓名" v-model="queryParam.userName"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="选择日期">
              <a-date-picker v-model="selectDate" format="YYYY-MM-DD" style="width: 100%" @change="onChange" :allowClear="true"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="时间段">
              <a-select
                v-model="queryParam.type"
                placeholder="请选择时间段"
                :allowClear="true"
                :options="timeList"
                @change="changeType">
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="设备">
              <a-select
                v-model="queryParam.deviceSn"
                placeholder="请选择设备"
                :allowClear="true"
                :options="deviceList"
                @change="changeDeviceSn">
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-button @click="() => {this.queryPage()}" type="primary">查询</a-button>
            <a-button @click="() =>{ queryParam = {}}" style="margin-left: 8px">重置</a-button>
            <a-button @click="()=>{this.exportData('wfucheckin/exportSignTotal', '签到记录')}"
                      style="margin-left: 8px">导出
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <!--  <a-button @click="(e) => this.goToUpload()" style="margin-bottom: 8px">
         导入
       </a-button> -->
    </div>
    <v-table
      :table-column="columns"
      :data="loadData"
      :rowKey="record => record.id"
      bordered
      ref="table"
      style="margin-top:8px"
    >
    </v-table>
  </a-card>
</template>

<script>
import {TableMixin} from '@/mixins/TableMixin'
import {signAllPage} from '@api/wfuSign/wfuSign'
import {assistantList, collegeList, deviceList, dropDownTimeCode} from '@api/base/wfuBase'
import moment from 'moment'

export default {
  components: {},
  mixins: [TableMixin],
  name: 'signInTotalView',
  data() {
    return {
      selectDate: moment(new Date()),
      deviceList: [],
      timeList: [],
      columns: [
        {
          title: '姓名',
          field: 'studentName'
        },
        {
          title: '学号',
          field: 'userCode'
        },
        {
          title: '学院',
          field: 'institute'
        },
        {
          title: '专业班级',
          field: 'major'
        },
        {
          title: '学生电话',
          field: 'mobile'
        },
        {
          title: '签到时间',
          field: 'checkTime'
        },
        {
          title: '签到地点',
          field: 'address'
        },
        {
          title: '导员姓名',
          field: 'assistantName'
        },
        {
          title: '导员工号',
          field: 'assistantCode'
        },
        {
          title: '导员电话',
          field: 'assistantMobile'
        }
      ],
      assistantList: [],
      collegeList: [],
      queryParam: {
        institute: '',
        major: '',
        assistantName: '',
        timeScope: ''
      },
      loadData: parameter => {
        return signAllPage(
          Object.assign(parameter, this.queryParam)
        ).then(res => {
          return res.data
        })
      }
    }
  },
  watch: {
    '$route'() {
      this.type = this.$route.query.type
      if (this.type) {
        this.init()
      }
    }
  },
  mounted() {
    this.init()
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.type = this.$route.query.type
      this.queryParam.type = this.$route.query.type
      this.queryParam.assistantId = this.$route.query.assistantId
      this.queryParam.institute = this.$route.query.institute
      this.queryParam.date = moment(new Date()).format('YYYY-MM-DD')
      this.$forceUpdate()
      assistantList(this.queryParam.institute).then(res => {
        this.assistantList = res.data
      })
      collegeList().then(res => {
        this.collegeList = res.data
      })
      dropDownTimeCode().then(res => {
        this.timeList = res.data
      })
      deviceList().then(res => {
        this.deviceList = res.data
      })
      this.queryPage()
    },
    onChange(date, dateString) {
      // 格式化日期类
      if (date !== null) {
        this.queryParam.date = this.selectDate.format('YYYY-MM-DD')
      } else {
        this.queryParam.date = undefined
      }
      this.$forceUpdate()
    },
    changeType(e) {
      this.queryParam.type = e
      this.$forceUpdate()
    },
    changeDeviceSn(e) {
      this.queryParam.deviceSn = e
      this.$forceUpdate()
    },
    changeCollege(e) {
      this.queryParam.institute = e
      this.queryParam.assistantId = undefined
      assistantList(this.queryParam.institute).then(res => {
        this.assistantList = res.data
      })
      this.$forceUpdate()
    },
    changeAssistant(e) {
      this.queryParam.assistantId = e
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>

</style>
